// 实现这个项目的构建任务
const del = require("del");
const browserSync = require("browser-sync");

const loadPlugins = require("gulp-load-plugins");

const plugins = loadPlugins();
const bs = browserSync.create();

const { src, dest, parallel, series, watch } = require("gulp");

const data = {
  menus: [],
  pkg: require("./package.json"),
  date: new Date(),
};

const clean = () => {
  return del(["dist", "tmep"]);
};

const style = () => {
  return src("src/assets/styles/*.scss", { base: "src" })
    .pipe(plugins.sass())
    .pipe(dest("tmep"))
    .pipe(bs.reload({ stream: true }));
};

const script = () => {
  return src("src/assets/scripts/*.js", { base: "src" })
    .pipe(plugins.babel({ presets: ["@babel/preset-env"] }))
    .pipe(dest("tmep"))
    .pipe(bs.reload({ stream: true }));
};

const page = () => {
  return src(["src/*.html", "src/**/*.html"], { base: "src" })
    .pipe(plugins.swig({ data }))
    .pipe(dest("tmep"))
    .pipe(bs.reload({ stream: true }));
};

const image = () => {
  return src("src/assets/images/**", { base: "src" })
    .pipe(plugins.imagemin())
    .pipe(dest("dist"));
};

const font = () => {
  return src("src/assets/fonts/**", { base: "src" })
    .pipe(plugins.imagemin())
    .pipe(dest("dist"));
};

const extra = () => {
  return src("public/**", { base: "public" }).pipe(dest("dist"));
};

const serve = () => {
  watch("src/assets/styles/*.scss", style);
  watch("src/assets/scripts/*.js", script);
  watch(["src/*.html", "src/**/*.html"], page);
  // watch("src/assets/images/**", image);
  // watch("src/assets/fonts/**", font);
  // watch("public/**", extra);

  watch(
    ["src/assets/images/**", "src/assets/fonts/**", "public/**"],
    bs.reload
  );

  bs.init({
    // notify: false,
    // port: 2080,
    // open: false,
    // files: "dist/**",
    server: {
      baseDir: ["tmep", "src", "public"],
      routes: {
        // 优先于baseDir
        "/node_modules": "node_modules",
      },
    },
  });
};

const useref = () => {
  return (
    src("tmep/*html", { base: "tmep" })
      .pipe(
        plugins.useref({
          searchPath: ["tmep", "."],
        })
      )
      // html js css
      .pipe(plugins.if(/\.js$/, plugins.uglify()))
      .pipe(plugins.if(/\.css$/, plugins.cleanCss()))
      .pipe(
        plugins.if(
          /\.html$/,
          plugins.htmlmin({
            collapseWhitespace: true,
            minifyCSS: true,
            minifyJS: true,
          })
        )
      )
      .pipe(dest("dist"))
  );
};

const compile = parallel(style, script, page);

const build = series(
  clean,
  parallel(series(compile, useref), extra, image, font)
);

const develop = series(compile, serve);

module.exports = {
  build,
  clean,
  develop,
};
